<template>
  <div id="classtime_manage" class="container">
    <div class="content">
      <!-- <div class="title">上课时间管理</div> -->
      <div class="panel">
        <div class="condition">
          <div class="row_one">
            <div v-if="isShowAdd && hasApi('classTimeAdd')" class="right_btn" @click="addCofim">新&nbsp;&nbsp;增</div>
          </div>
        </div>

        <div>
          <table class="table" cellspacing="0">
            <thead class="thead">
              <tr>
                <td style="width: 6rem;">上课时间</td>
                <td style="width: 4rem;">所属校区</td>
                <td style="width: 4rem;">创建时间</td>
                <td style="width: 4rem;">创建人</td>
                <td style="width: 2rem;">操作</td>
              </tr>
            </thead>
            <tbody class="tbody">
              <tr v-for="item,index in classtimeList">
                <td>{{item.weekName}}<br>{{item.startTime}} — {{item.endTime}}</td>
                <td>{{item.campusName}}</td>
                <td>{{item.createTime}}</td>
                <td>{{item.createUserName}}</td>
                <td>
                  <span v-if="isShowAdd && hasApi('classTimeUpdate')" class="operate_btn" @click="handleEdit(index,item)">编辑</span>
                  &nbsp;
                  <span
                    v-if="isShowAdd && hasApi('classTimeDetele')"
                    class="operate_btn"
                    @click="handleDelete(index,item)"
                  >删除</span>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <el-pagination
          class="page"
          layout="total, sizes, prev, pager, next, jumper"
          :current-page="tabledisplayObj.currentPage"
          @size-change="pageSizeChange"
          @current-change="tabledisplayChangePage"
          :total="tabledisplayObj.total"
        ></el-pagination>
      </div>
    </div>
    <createClassTime ref="createClassTime" @callback="closeAdd"></createClassTime>
  </div>
</template>

<script>
import { mapState, mapGetters, mapActions } from "vuex"; //先要引入
import createClassTime from "./common/createClassTime";
let vm;
let user;
export default {
  data() {
    return {
      searchText: "", //搜索框输入文本
      tabledisplayObj: {
        currPage: 1,
        pageSize: 10,
        campusId: this.$store.state.campusId,
        total: 0
      },
      isShowAdd: true,
      isShowSearch: false,
      classtimeList: [],
      weekModeList: [],
      formLabelWidth: "140px"
    };
  },
  components: {
    createClassTime
  },
  methods: {
    /**
     * 初始化数据
     */
    initData() {
      this.getData(this.tabledisplayObj);
    },
    campusChange:function(campusId){
      vm.tabledisplayObj.campusId = campusId;
      this.getData(vm.tabledisplayObj);
    },
    /**
     * 抽取出来获取列表
     */
    getData(paras) {
      let classtimetemp = []; //临时存放列表
      api.classTimeList(paras).then(function(data) {
        console.log(data);
        if (data.resultCode == 2000) {
          classtimetemp = data.list;
          for (let i = 0; i < classtimetemp.length; i++) {
            console.log(classtimetemp[i].createTime);
            classtimetemp[i].createTime = classtimetemp[i].createTime.split(
              " "
            )[0];
            classtimetemp[i].weekName = "";
            classtimetemp[i].startTime = classtimetemp[i].startTime.substring(0,5);
            classtimetemp[i].endTime = classtimetemp[i].endTime.substring(0,5);
            for (
              let x = 0;
              x < classtimetemp[i].classtimeWeekList.length;
              x++
            ) {
              let week = vm.weekModeList.find(
                element =>
                  element.value ==
                  classtimetemp[i].classtimeWeekList[x].weekMode
              );
              if (classtimetemp[i].weekName == "") {
                classtimetemp[i].weekName += week.name;
              } else {
                classtimetemp[i].weekName += "," + week.name;
              }
            }
          }
          vm.tabledisplayObj.total = data.totalCount;
          vm.classtimeList = classtimetemp;
        } else {
          vm.$message.error(data.message);
        }
      });
    },
    pageSizeChange: function(val) {
      this.tabledisplayObj.pageSize = val;
      this.initData();
    },
    /**表格显示形式翻页 */
    tabledisplayChangePage(val) {
      this.tabledisplayObj.currPage = val;
      this.initData();
    },
    closeAdd(data) {
      console.log(data);
      this.initData();
    },
    /**
     * 向数组中添加数据
     */
    addCofim() {
      vm.$refs.createClassTime.init();
    },
    /**
     * 更新/编辑数据
     */
    handleEdit(index, row) {
      vm.$refs.createClassTime.init(JSON.parse(JSON.stringify(row)));
    },
    handleDelete(index, row) {
      console.log(index, row);
      this.$confirm("此操作将删除该上课时间, 是否继续?", "温馨提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true
      })
        .then(() => {
          let paras = {
            classTimeId: row.classTimeId
          };
          api.classTimeDetele(paras).then(function(data) {
            if (data.result == "操作成功") {
              vm.initData();
              vm.$message({
                message: "删除成功",
                type: "success"
              });
            } else {
              vm.$message.error(data.result);
            }
          });
        })
        .catch(() => {});
    },
    /**
     * 搜索教室
     */
    searchClassroom() {
      console.log(this.searchText);
      if (this.searchText == "") return;
      this.tabledisplayObj.currPage = 1;
      this.getData(this.tabledisplayObj);
      this.isShowSearch = true;
    }
  },
  mounted() {
    vm = this;
    user = tool.getItem(lsKey.user, true); //得到当前用户信息
    let dicdata = tool.getItem(lsKey.dict, true);
    this.weekModeList = dicdata["week_mode"];
    // this.form.orgId = user.orgId;
    if (user.roleMode == 0) {
      vm.isShowAdd = false;
    }
    this.initData();
  },
  computed: {}
};
</script>

<style lang="scss">
#classtime_manage {
  .el-input__inner {
    border-radius: 0.08rem;
    font-size: 0.16rem;
    color: #666666;
    height: 0.36rem;
    line-height: 0.36rem;
  }
  .el-input__icon {
    line-height: 0.36rem;
  }

  .input_search {
    .el-input__inner {
      background-color: rgb(247, 248, 250);
    }
  }
}
</style>
<style scoped src="@/style/module/table.css"></style>
<style scoped src="@/style/clue_manage/clue_manage.css"></style>
<style scoped>
.right_btn {
  background-image: url(../../assets/img/clue_manage/add_white.png);
  width: 1.54rem;
}
</style>